<template>
  <div>
    <el-menu
      class='sidebar-container-menu'
      mode='vertical'
      :default-active='activeMenu'
      :background-color='scssVariables.menuBg'
      :text-color='scssVariables.menuText'
      :active-text-color='scssVariables.menuActiveText'
      :collapse='isCollapse'
      :collapse-transition='true'
    >
      <sidebar-item
        v-for='route in menuRoutes'
        :key="route.path"
        :item='route'
        :base-path='route.path'
      />
    </el-menu>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed, ref } from 'vue'

import { useRoute } from 'vue-router'
// 导入scss变量在组件中使用
import variables from '@/styles/variables.scss'
// el-menu-item封装
import SidebarItem from './SidebarItem.vue'
// 导入路由表
import { routes } from '@/router'

import { useStore } from '@/store'

export default defineComponent({
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  setup () {
    const route = useRoute()
    const store = useStore()
    const activeMenu = computed(() => {
      const { path, meta } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    })
    const scssVariables = computed(() => variables)
    const isCollapse = computed(() => !store.getters.sidebar.opened)

    // 渲染路由
    const menuRoutes = computed(() => routes)

    return {
      scssVariables,
      isCollapse,
      activeMenu,
      menuRoutes
    }
  }
})
</script>

<style scoped>

</style>
